<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useIndexStore } from "../../pinia";
import { ElMessage } from "element-plus"
import { request } from '@/utils/axios/request.js'
import local from '@/components/local.vue'


let locabob = ref(false)
// 小眼睛
let showPassword = ref(false)
//确认密码弹窗
let dialogFormVisible = ref(false)
let form = reactive({
    password1: '',
    password2: '',
})
let store = useIndexStore()
let tableData = ref([])
// 显示成功信息
// ElMessage.success('操作成功！')
let usernameLoca = localStorage.getItem('username')
let userItem = ref('')
let findAll = null
//打卡
let input = null
if (usernameLoca) {
    findAll = async () => {
        try {
            locabob.value = true
            let resData = await request({
                url: '/admin/punch/punchsAll',
                method: 'get',
            })
            let newdata = await request({
                url: `/admin/user/users1?username=${usernameLoca}`,
                method: 'get'
            })
            userItem.value = newdata.data[0]
            if (userItem.value.department == '技术部' && userItem.value.position != '项目经理') {
                resData.data = resData.data.filter(item => item.department == '技术部' && item.position != '项目经理')
            } else if (userItem.value.department == '人事部' && userItem.value.position != '人事经理') {
                resData.data = resData.data.filter(item => item.department == '人事部' && item.position != '人事经理')
            } else if (userItem.value.department == '人事部' && userItem.value.position == '人事经理') {
                resData.data = resData.data.filter(item => item.department == '人事部')
            } else if (userItem.value.department == '技术部' && userItem.value.position == '项目经理') {
                resData.data = resData.data.filter(item => item.department == '技术部')
            }
            input = reactive({
                "nickname": userItem.value.nickname,
                "attendance_type": "",
                "department": userItem.value.department,
                "position": userItem.value.position,
                "address_start": "",
                "time_start": "",
                "address_end": "",
                "time_end": ""
            })
            tableData.value = resData.data.sort((a, b) => b.id - a.id)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
    findAll()
}

input = reactive({
    "nickname": userItem.value.nickname,
    "attendance_type": "",
    "department": userItem.value.department,
    "position": userItem.value.position,
    "address_start": "",
    "time_start": "",
    "address_end": "",
    "time_end": ""
})


//打卡当前时间
let time = ref('')
//上班打卡或者下班打卡
let katable = ref('上班打卡时间')
let names = ref('')
//搜索状态
let state = ref('');
let options = reactive([
    {
        value: '正常',
        label: '正常'
    },
    {
        value: '迟到',
        label: '迟到'
    },
    {
        value: '旷工',
        label: '旷工'
    },
    {
        value: '事假',
        label: '事假'
    },
    {
        value: '病假',
        label: '病假'
    },
])

let updateDa = ref('打卡')

//关闭打卡
let caiDanS = ref(false)
let delCai = () => {
    caiDanS.value = false
    input = reactive({
        "nickname": userItem.value.nickname,
        "attendance_type": "",
        "department": userItem.value.department,
        "position": userItem.value.position,
        "address_start": "",
        "time_start": "",
        "address_end": "",
        "time_end": ""
    })
    updateDa.value = '打卡'
    katable = ref('上班打卡时间')
}

//开启打卡
let sheZhiCai = () => {
    caiDanS.value = true
}

// 重置
let closed = async () => {
    if (Recycletext.value == "关闭回收站") {
        Recycleall();
        names.value = ''
        state.value = ''
        return;
    }
    findAll()
    names.value = ''
    state.value = ''
}

//分页
let currentPage = ref(1);
let pageSize = ref(10);

let currentDate = computed(() => {
    let statIndex = (currentPage.value - 1) * pageSize.value
    let endIndex = currentPage.value * pageSize.value
    return tableData.value.slice(statIndex, endIndex);
})

//下班打卡，修改id
let newId = ref('')

// 修改
const update = (id) => {
    newId.value = id
    updateDa.value = '修改'
    let data = tableData.value.find(item => item.id == id)
    input = reactive(JSON.parse(JSON.stringify(data)))
    sheZhiCai()
}


// 下班打卡
const put = (id) => {
    let data = tableData.value.find(item => item.id == id)
    if (userItem.value.nickname != data.nickname) {
        ElMessage.error('禁止帮助别人打卡')
        return
    }
    if (data.time_end) {
        ElMessage.error('已经打卡')
        return
    }
    time.value = new Date().toLocaleString()
    katable.value = '下班打卡时间'
    newId.value = id
    input = reactive(JSON.parse(JSON.stringify(data)))
    sheZhiCai()
}

//上班打卡
const uptable = () => {
    katable.value = '上班打卡时间'
    time.value = new Date().toLocaleString()
    // 当前小时
    let hous = Number(time.value.split(' ')[1].split(':')[0])
    if (hous < 9 && hous > 7) {
        input.attendance_type = '正常'
    } else if (hous >= 9 && hous < 10) {
        input.attendance_type = '迟到'
    } else if (hous >= 10) {
        input.attendance_type = '旷工'
    } else if (hous < 7 && hous > 0) {
        ElMessage.warning('未到上班时间')
    }
    sheZhiCai()
}

// 定义一个追加的空数组
let newTableDate = ref({
    "nickname": '',
    "department": '',
    "position": '',
    "reason": "",
    "start_time": "",
    "end_time": "",
    "overtime_duration": "",
    "created_at": "",
    "approval_status": "",
    "approval_comments": "",
})



//保存
const save = async () => {
    if (katable.value == '上班打卡时间' && updateDa.value == '打卡') {
        let obj = JSON.parse(JSON.stringify(input))
        if (obj.address_start == '' || obj.attendance_type == '' || obj.nickname == '') {
            ElMessage.error('信息不能为空')
            return;
        }
        try {
            locabob.value = true
            obj.time_start = time.value
            let data = await request({
                url: '/admin/punch/punchs',
                method: 'post',
                data: obj
            })
            ElMessage.success(data.message)
            findAll()
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
        delCai()
    } else if (katable.value == '下班打卡时间' && updateDa.value == '打卡') {
        let obj = JSON.parse(JSON.stringify(input))
        if (obj.address_end == '') {
            ElMessage.error('下班地址不能为空')
            return;
        }
        try {
            locabob.value = true
            let hours = Number(time.value.split(' ')[1].split(':')[0])
            if (hours == 18) {
                let data1 = await request({
                    url: '/admin/punch/punchs',
                    method: 'put',
                    data: {
                        time_end: time.value,
                        address_end: input.address_end,
                        id: newId.value
                    }
                })
                findAll()
                ElMessage.success(data1.message)
            } else if (hours >= 19 && hours <= 24) {
                let data = new Date();
                newTableDate.nickname = userItem.value.nickname;
                newTableDate.department = userItem.value.department;
                newTableDate.position = userItem.value.position;
                newTableDate.reason = '加班';
                newTableDate.start_time = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate() + '  ' + '18:00:00';
                newTableDate.end_time = new Date().toLocaleString();
                newTableDate.overtime_duration = hours - 18;
                newTableDate.approval_status = '待审批';
                newTableDate.created_at = new Date().toLocaleString();
                newTableDate.approval_comments = '';

                // 传值给加班申请页面
                if (input.attendance_type == '正常') {
                    let data = await request({
                        url: '/admin/applicationForExtraWork/applicationForExtraWorkA',
                        method: 'post',
                        data: { newTableDate }
                    })
                    let data1 = await request({
                        url: '/admin/punch/punchs',
                        method: 'put',
                        data: {
                            time_end: time.value,
                            address_end: input.address_end,
                            id: newId.value
                        }
                    })
                    findAll()
                    ElMessage.success(data1.message)
                } else {
                    let data1 = await request({
                        url: '/admin/punch/punchs',
                        method: 'put',
                        data: {
                            time_end: time.value,
                            address_end: input.address_end,
                            id: newId.value
                        }
                    })
                    findAll()
                    ElMessage.success(data1.message)
                }
            } else if (hours < 18) {
                ElMessage.warning('未到下班打卡时间，不允许早退')
            }
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    } else if (updateDa.value == '修改') {
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/punch/punchs1',
                method: 'put',
                data: {
                    address_end: input.address_end,
                    address_start: input.address_start,
                    attendance_type: input.attendance_type,
                    nickname: input.nickname,
                    id: newId.value
                }
            })
            findAll()
            ElMessage.success(data.message)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
    delCai()
}


// 删除
let lastid = ref('')
let current = ref({
    "nickname": "",
    "attendance_type": "",
    "department": "",
    "position": "",
    "address_start": "",
    "time_start": "",
    "address_end": "",
    "time_end": ""
})
const del = (id) => {
    lastid.value = id
    tableData.value.forEach((item, index) => {
        if (item.id == id) {
            current.value.nickname = item.nickname
            current.value.attendance_type = item.attendance_type
            current.value.department = item.department
            current.value.position = item.position
            current.value.address_start = item.address_start
            current.value.time_start = item.time_start
            current.value.address_end = item.address_end
            current.value.time_end = item.time_end
        }
    })
}
let confirmEvent = async () => {
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/punch/punchs',
            method: 'delete',
            data: { id: lastid.value }
        })
        findAll()
        ElMessage.success(data.message)
    } catch (err) {
        console.log(err);
    }
    try {
        let Recycledata = await request({
            url: '/admin/punch/Recycleadd',
            method: 'post',
            data: current.value
        })
        Recycleall()
    } catch (error) {
        console.log(error);
    }
    locabob.value = false
}
// 模糊查询
const search = async () => {
    if (Recycletext.value == "关闭回收站") {
        try {
            locabob.value = true
            let newdata = await request({
                url: `/admin/punch/Recycles?nickname=${names.value}&attendance_type=${state.value}`,
                method: 'get'
            })
            // 显示成功信息
            ElMessage.success("查询成功")
            newRecycledata.value = newdata.data
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
        return;
    }
    try {
        locabob.value = true
        let newdata = await request({
            url: `/admin/punch/punchs?nickname=${names.value}&attendance_type=${state.value}`,
            method: 'get'
        })
        // 显示成功信息
        ElMessage.success("查询成功")
        tableData.value = newdata.data
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}
//--------------------------------------回收站---------------------------------------
let newRecycledata = ref([])
//封装查询所有数据
let Recycleall = async () => {
    try {
        let Recycledata = await request({
            url: "/admin/punch/RecycleAll",
            method: 'get'
        })
        newRecycledata.value = Recycledata.data.sort((a, b) => b.id - a.id)
    } catch (err) {
        console.log(err);
    }
}
let boxShow = ref(true)
let Recycletext = ref("回收站")
//回收按钮
let Recycle = () => {
    if (Recycletext.value == "回收站") {
        boxShow.value = false
        Recycleall()
        Recycletext.value = "关闭回收站"
    } else if (Recycletext.value == "关闭回收站") {
        boxShow.value = true
        Recycletext.value = "回收站"
        names.value = ''
        state.value = ''
    }
}
//回收站删除按钮
let Recycleid = ref('')
let remove = (id) => {
    dialogFormVisible.value = true
    Recycleid.value = id
}

//确认密码删除
let passave = async () => {
    let userItems = ref('')
    let usernameLoca = localStorage.getItem('username')
    if (usernameLoca) {
        try {
            let newdata = await request({
                url: `/admin/user/users1?username=${usernameLoca}`,
                method: 'get'
            })
            userItems.value = newdata.data[0]
        } catch (err) {
            console.log(err);
        }
    }
    if (form.password1 != userItems.value.password) {
        ElMessage.error('原始密码错误')
        form.password1 = ''
        form.password2 = ''
        return;
    } else if (form.password2 != userItems.value.password) {
        ElMessage.error('确认密码错误')
        form.password2 = ''
        return;
    } else if (form.password2 == userItems.value.password || userItems.value.password == form.password1) {
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/punch/Recycledel',
                method: 'delete',
                data: { id: Recycleid.value }
            })
            Recycleall()
            ElMessage.success(data.message)
            dialogFormVisible.value = false
            form.password1 = ''
            form.password2 = ''
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
}
// 文件导出
import * as XLSX from 'xlsx'
const fileOut = () => {
    if (confirm('确认导出吗')) {
        const data = tableData.value; // json数据
        const sheetName = 'punch'; // 表格名称
        const sheetHeader = ["nickname", "attendance_type", "department", "position", "address_start", "time_start", "address_end", "time_end"]; // 表头
        const sheetData = data.map(item => [item.nickname, item.attendance_type, item.department, item.position, item.address_start, item.time_start, item.address_end, item.time_end]); // 表格数据
        sheetData.unshift(sheetHeader); // 将表头插入表格数据第一行
        const worksheet = XLSX.utils.aoa_to_sheet(sheetData); // 将表格数据转换为worksheet
        const workbook = XLSX.utils.book_new(); // 创建workbook
        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName); // 将worksheet插入workbook
        XLSX.writeFile(workbook, 'punch.xlsx'); // 下载表格
    }
}
// 文件导入
const fileOver = (event) => {
    const file = event.target.files[0]; // 获取上传的文件
    const reader = new FileReader(); // 创建FileReader对象
    reader.onload = async (e) => {
        const data = e.target.result; // 获取文件内容
        const workbook = XLSX.read(data, { type: 'binary' }); // 将文件内容转换为workbook
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个worksheet
        const sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 将worksheet转换为json数据
        const header = sheetData[0]; // 获取表头
        const jsonData = sheetData.slice(1).map(row => {
            const obj = {};
            header.forEach((h, i) => {
                obj[h] = row[i];
            });
            return obj;
        }); // 将表格数据转换为json数据
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/punch/punchs1',
                method: 'post',
                data: jsonData
            })
            findAll()
            ElMessage.success(data.message)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
    reader.readAsBinaryString(file); // 读取文件内容
}
//恢复按钮
let recover = (id) => {
    Recycleid.value = id
    newRecycledata.value.forEach((item, index) => {
        if (item.id == id) {
            current.value.nickname = item.nickname
            current.value.attendance_type = item.attendance_type
            current.value.department = item.department
            current.value.position = item.position
            current.value.address_start = item.address_start
            current.value.time_start = item.time_start
            current.value.address_end = item.address_end
            current.value.time_end = item.time_end
        }
    })
}
//恢复确认弹窗
let confirmrecover = async () => {
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/punch/Recycledels',
            method: 'delete',
            data: { id: Recycleid.value }
        })
        Recycleall()
        ElMessage.success(data.message)
    } catch (err) {
        console.log(err);
    }
    try {
        let Recycledata = await request({
            url: '/admin/punch/punchs',
            method: 'post',
            data: current.value
        })
        findAll()
    } catch (error) {
        console.log(error);
    }
    locabob.value = false
}



</script>

<template>
    <div class="box_boxz">
        <local v-show="locabob" />
        <div class="container">
            <ul class="nav_ul">
                <li>
                    <span>姓名:&nbsp;</span>
                </li>
                <li>
                    <el-input v-model="names" placeholder="请输入姓名" />
                </li>
                <li>
                    <span>打卡状态:&nbsp;</span>
                    <el-select v-model="state" placeholder="请选择状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li><el-button type="primary" @click="search">搜索</el-button></li>
                <li><el-button @click="closed">重置</el-button></li>
                <li><el-button type="primary" @click="uptable" v-show="boxShow">上班打卡</el-button></li>

                <li><el-button type="success" @click="fileOut">文件导出</el-button></li>
                <li  v-show="store.role == 1 || store.role == 0">
                    <label for="files">
                        <p class="daoRu">文件导入</p>
                    </label>
                    <input type="file" style="display: none;" id="files" @change="fileOver">
                </li>
                <li style="margin-left: 10px;"><el-button type="primary" @click="Recycle" v-show="store.role == 0">{{
                    Recycletext }}</el-button></li>
            </ul>
            <div class="box" v-show="boxShow">
                <el-table ref="multipleTableRef" :data="currentDate">
                    <el-table-column property="nickname" label="姓名" />
                    <el-table-column property="attendance_type" label="打卡状态" />
                    <el-table-column property="address_start" label="上班打卡地址" />
                    <el-table-column property="time_start" label="上班打卡时间" show-overflow-tooltip />
                    <el-table-column property="address_end" label="下班打卡地址" />
                    <el-table-column property="time_end" label="下班打卡时间" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button type="primary" @click.prevent="put(scope.row.id)">下班打卡</el-button>
                            <el-button v-show="store.role == 1 || store.role == 0" link type="primary" size="small"
                                @click.prevent="update(scope.row.id)">
                                修改
                            </el-button>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF"
                                title="确定删除吗?" @confirm="confirmEvent">
                                <template #reference>
                                    <el-button link type="primary" size="small" @click.prevent="del(scope.row.id)"
                                        v-show="store.role == 0">
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 回收站表 -->
            <div class="box" v-show="!boxShow">
                <el-table ref="multipleTableRef" :data="newRecycledata">
                    <el-table-column property="nickname" label="姓名" />
                    <el-table-column property="attendance_type" label="打卡状态" />
                    <el-table-column property="address_start" label="上班打卡地址" />
                    <el-table-column property="time_start" label="上班打卡时间" show-overflow-tooltip />
                    <el-table-column property="address_end" label="下班打卡地址" />
                    <el-table-column property="time_end" label="下班打卡时间" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF"
                                title="确定恢复吗?" @confirm="confirmrecover">
                                <template #reference>
                                    <el-button link type="primary" size="small" @click.prevent="recover(scope.row.id)">
                                        恢复
                                    </el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small" @click.prevent="remove(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="demo-pagination-block" v-show="boxShow">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length" />
            </div>
            <div class="demo-pagination-block" v-show="!boxShow">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                    :total="newRecycledata.length" />
            </div>
        </div>
        <div class="sheZhi" :style="{ width: caiDanS ? '460px' : '0' }">
            <dl>
                <dt>
                <dd>{{ updateDa }}</dd>
                <dd @click="delCai"><span class="iconfont icon-shanchu2"></span></dd>
                </dt>
            </dl>
            <ul>
                <li v-show="updateDa != '修改'">
                    <span>{{ katable }}:&nbsp;</span>
                    <el-input v-model="time" clearable disabled />
                </li>
                <li v-show="katable == '上班打卡时间'">
                    <span>姓名:&nbsp;</span>
                    <el-input v-model="input.nickname" placeholder="请输入姓名" clearable disabled />
                </li>
                <li v-show="katable == '上班打卡时间'">
                    <span>打卡状态:&nbsp;</span>
                    <el-select v-model="input.attendance_type" placeholder="请选择状态" disabled>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li v-show="katable == '上班打卡时间'">
                    <span>上班打卡地址:&nbsp;</span>
                    <el-input v-model="input.address_start" placeholder="上班打卡地址" clearable />
                </li>
                <li v-show="katable == '下班打卡时间' || updateDa == '修改'">
                    <span>下班打卡地址:&nbsp;</span>
                    <el-input v-model="input.address_end" placeholder="下班打卡地址" clearable />
                </li>
                <li>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="delCai">取消</el-button>
                </li>
            </ul>
        </div>
        <div class="mengBan" v-show="caiDanS" @click="delCai"></div>
        <div class="popbox">
            <el-dialog v-model="dialogFormVisible" title="确认密码">
                <el-form :model="form">
                    <el-form-item label="原始密码" label-width="140px">
                        <el-input v-model="form.password1" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                    <el-form-item label="确认密码" label-width="140px">
                        <el-input v-model="form.password2" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="passave">
                            确认删除
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>


<style lang="less" scoped>
.daoRu {
    width: 80px;
    height: 32px;
    color: white;
    border-radius: 5px;
    background-color: #7ec050;
    text-align: center;
    line-height: 32px;
    font-weight: 400;
}

.box_boxz {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;

    .nav_ul {
        display: flex;
        flex-shrink: 0;
        height: 50px;
        // line-height: 30px;
        font-size: 14px;
        padding-left: 32px;
        margin-top: 10px;
        background: rgb(255, 255, 255);

        li {
            height: 100%;
            font-weight: 700;
            display: flex;
            align-items: center;
            margin-left: 10px;

            // &:nth-child(3),
            // &:nth-child(4) {
            //     margin-left: 20px;
            // }

            // &:nth-child(5) {
            //     margin-left: 10px;
            //     margin-right: 10px
            // }

            // &:nth-child(7),
            // &:nth-child(8) {
            //     margin-left: 10px;
            // }
        }

        ;
    }

    .demo-pagination-block {
        padding-bottom: 40px;
        overflow: hidden;
        align-self: center;
    }

    .box {
        padding: 0 20px;
    }
}

// 设置
.sheZhi {
    width: 0px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: white;
    z-index: 1001;
    box-shadow: -1px 0 10px rgb(143, 143, 143);
    transition: all 0.3s ease-in-out;

    dl {
        display: flex;
        flex-direction: column;

        dt:nth-child(1) {
            width: 100%;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            border-bottom: 0.5px solid rgba(216, 214, 214, 0.5);
            margin-bottom: 45px;


            dd:nth-child(1) {
                font-size: 20px;
            }

            dd:nth-child(2) {
                margin-right: 60px;

            }
        }

    }

    ul {
        display: flex;
        flex-direction: column;
        padding: 0 30px;

        .demo-pagination-block {
            padding-bottom: 40px;
            overflow: hidden;
            align-self: center;
        }

        li {
            margin-bottom: 20px;
            display: flex;
            align-items: center;

            span {
                flex-shrink: 0;
                margin-right: 20px;
                font-weight: 600;
                font-size: 14px;
            }
        }
    }
}

// 蒙版
.mengBan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(247, 247, 247, 0.3);
    filter: brightness(1%);
}


.active {
    background-color: #1890FF;

    span {
        color: white;
    }

    a {
        color: white !important;
    }
}

.active1 {
    span {
        color: white;
    }

    .icon-jiantouxia {
        transform: rotateX(180deg);
        transition: all 0.1s linear;
    }
}

.popbox {

    :deep .el-input {
        width: 300px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }

    :deep .el-form {
        margin-left: 50px;
    }
}
</style>